<template>
    <div class="container">
        <div class="main">
            <div class="header">
                <el-button type="primary" @click="add">新建</el-button>
                <el-button type="success" @click="importData">导入</el-button>
                <el-button type="warning" @click="edit">编辑</el-button>
            </div>
            <el-table :data="tableData" border class="eltable">
                <el-table-column type="cprk_zt" label="状态" width="100">
                    <template #default="{ row }">
                        <span v-if="row.cprk_zt === 1">未入库</span>
                        <span v-else-if="row.cprk_zt === 2">已入库</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cp_code" label="成品编码"></el-table-column>
                <el-table-column prop="cprkxx_cpmc" label="成品名称"></el-table-column>
                <el-table-column prop="dictionary_name" label="成品分类"></el-table-column>
                <el-table-column prop="dw_name" label="成品单位"></el-table-column>
                <el-table-column prop="cprkxx_rksl" label="出库数量"></el-table-column>
            </el-table>
            <div class="button-container">
                <el-button type="danger" @click="onCancel">返回</el-button>
            </div>
        </div>
    </div>

</template>

<script>
import { ref, onMounted ,nextTick} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
    setup() {
        const searchKey = ref('');
        const treeData = ref([]);
        const row = ref(null);
        const router = useRouter();
        const route = useRoute();
        const dialogVisible = ref(false);
        const defaultProps = {
            children: 'children',
            label: 'label',
        };

        const tableData = ref([]);

        const selectedFilter = ref('');
        const searchTable = ref('');
        const currentPage = ref(1);
        const pageSize = ref(2);
        const totalItems = ref(3);
        
        const onCancel = () => {
            router.push({ path: '/RawMaterialsStorage' });
        }

        const add = () => {
            // 添加逻辑  
        };

        const edit = () => {
            // 编辑逻辑  
        };

        const importData = () => {
            // 导入逻辑  
        };

        const query = () => {
            // 查询逻辑  
            console.log('Querying with:', searchTable.value);
        };



        const rkRow = (row) => {
            // 删除行逻辑  
            console.log('Deleting row:', row);
            dialogVisible.value = true;
        };

        const handleCurrentChange = (page) => {
            currentPage.value = page;
            // 分页逻辑  
            console.log('Current page:', page);
        };
        onMounted(async () => {
            // 获取传递过来的 yclcg_code
            const cprk_code = route.query.cprk_code;
            const cgxqResponse = await axios.get(`/api/WMS_CCPRKXX/GetCCPRKXX?code=${cprk_code}`);
            const cgxq1 = cgxqResponse.data;
            if (Array.isArray(cgxq1)) {
                tableData.value = cgxq1;
            } else if (typeof cgxq1 === 'object' && cgxq1 !== null) {
                // 如果 cgxq1 是一个对象，将其转换为数组
                tableData.value = [cgxq1];
            } else {
                // 如果 cgxq1 是其他类型，初始化为空数组
                tableData.value = [];
            }

            // 确保数据在表格渲染之前赋值
            nextTick(() => {
                console.log('Table data updated:', tableData.value);
            });
        });
        // 确保所有函数都被返回  
        return {
            searchKey,
            treeData,
            defaultProps,
            tableData,
            selectedFilter,
            searchTable,
            currentPage,
            pageSize,
            totalItems,
            add,
            edit,
            importData,
            query,
            rkRow,
            handleCurrentChange,
            onCancel,
        };
    },
};
</script>

<style>
.container {
    display: flex;
    gap: 20px;
    height: 95%;
}

.sidebar {
    height: 100%;

}

.main {
    width: 80%;
    flex: 1;
    height: 100%;
}

.header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.eltable {
    height: 95%;
}

.letree {
    height: 100%;
}

.button-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
</style>